<!--
 * @Date: 2023-02-22 11:38:32
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-09 10:51:46
 * @FilePath: \sososn-web-new\src\views\bulkIndustry\component\industrialCase.vue
-->
<template>
  <div class="group">
    <h1 class="title" data-aos="fade-up">产品相关应用案例</h1>
    <!-- <ul class="section" data-aos="fade-up" data-aos-delay="100">
      <li class="section-1">
        <div
          class="bg-img"
          :style="{
            background: `url(${userImg}) top right no-repeat`,
            'background-size': '2.88rem auto'
          }"
        ></div>
        <h2 class="section-title">国能项目案例</h2>
        <p>
          系统建设主要围绕大数据中心搭建、数据标准化治理和数据可视化分析，通过大数据处理平台打通各业务域之间的数据链路，搭建新峰统一的大数据中心，通过可视化分析大屏进行数据分析、展现，为企业数字化营销、经营决策提供数据支撑。
        </p>
        <img :src="caseImg" alt="" />
        <div class="detail-btn">了解详情</div>
      </li>
    </ul> -->
    <div class="banner-layout" data-aos="fade-up" data-aos-delay="100">
      <div class="left-nav" @click="prePage">
        <el-image :src="$getAssetsImages('zuo.png')" />
      </div>
      <div class="banner-center">
        <transition
          :enter-active-class="
            fadeFlag === 'next'
              ? 'animate__animated animate__fadeInLeftBig  animate__slow'
              : 'animate__animated animate__fadeInRightBig animate__slow'
          "
          :leave-active-class="
            fadeFlag === 'next'
              ? 'animate__animated animate__fadeOutRight'
              : 'animate__animated animate__fadeOutLeft'
          "
          :duration="{ leave: 1000 }"
        >
          <div v-show="isShowBanner" class="banner-wrapper flex-row justify-between items-center">
            <div class="left-box">
              <p class="banner-title">{{ caseList[showIndex].title }}</p>
              <p class="banner-subTitle">
                {{ caseList[showIndex].desc }}
              </p>
              <div class="banner-btn">
                <router-link :to="caseList[showIndex].to">了解详情</router-link>
              </div>
            </div>
            <img class="right-image" :src="caseList[showIndex].imgUrl" />
          </div>
        </transition>
      </div>
      <div class="right-nav" @click="nextPage">
        <el-image :src="$getAssetsImages('you.png')" />
      </div>
      <el-image :src="userImg" class="img-box" />
    </div>
    <div class="section-2">
      <span class="text-1">{{ formate(showIndex + 1) }}</span
      ><em class="text-2">/</em><span class="text-3">{{ formate(caseList.length) }}</span>
      <ul class="progress">
        <li
          v-for="(el, i) in caseList"
          :key="i"
          :class="{ success: showIndex == i }"
          @click="choosePage(i)"
        ></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const { industrialCase } = inject('productData')
let userImg = industrialCase.userImg

let caseList = industrialCase.caseList

const showIndex = ref(0)
const isShowBanner = ref(true)
const fadeFlag = ref('next')

const nextPage = () => {
  fadeFlag.value = 'next'
  isShowBanner.value = false

  if (showIndex.value === caseList.length - 1) {
    showIndex.value = 0
  } else {
    showIndex.value += 1
  }
  nextTick(() => {
    isShowBanner.value = true
  })
}

const prePage = () => {
  fadeFlag.value = 'pre'
  isShowBanner.value = false

  if (showIndex.value === 0) {
    showIndex.value = caseList.length - 1
  } else {
    showIndex.value -= 1
  }
  nextTick(() => {
    isShowBanner.value = true
  })
}

const formate = value => {
  if (value < 10) {
    return '0' + value
  }
}
const choosePage = i => {
  showIndex.value = i
}
</script>

<style lang="scss" scoped>
.group {
  padding: 80px 240px 90px;
  background: #fff;

  .title {
    margin: 0 0 60px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: 38px;
    font-weight: 500;
    color: #333;
    text-align: center;
  }

  .banner-layout {
    position: relative;
    width: 1440px;
    height: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 24px 0 rgb(221 221 221 / 40%);

    .banner-center {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .img-box {
      position: absolute;
      top: 0;
      right: 0;
      width: 288px;
      height: 145px;
    }

    .left-nav {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -60px;
      width: 36px;
      height: 36px;
      margin: auto;
      cursor: pointer;
    }

    .right-nav {
      position: absolute;
      top: 0;
      right: -60px;
      bottom: 0;
      width: 36px;
      height: 36px;
      margin: auto;
      cursor: pointer;
    }

    .banner-wrapper {
      height: 100%;
      padding: 0 107px 0 80px;
      overflow: hidden;

      .right-image {
        max-width: 293px;
        max-height: 286px;
      }

      .left-box {
        padding-top: 23px;

        .banner-title {
          margin-bottom: 14px;
          font-family: PingFangSC-Medium, 'PingFang SC';
          font-size: 24px;
          font-weight: 500;
          line-height: 33px;
          color: #333;
        }

        .banner-subTitle {
          width: 750px;
          margin-bottom: 68px;
          font-family: PingFangSC-Regular, 'PingFang SC';
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
          color: #666;
        }

        .banner-btn {
          width: 117px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          border: 1px solid #b0b0b0;
          border-radius: 4px;

          span {
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-size: 14px;
            font-weight: 400;
            color: #333;
          }

          &:hover {
            border: 1px solid #009cff;

            span {
              color: #009cff;
            }
          }
        }
      }
    }
  }

  .section-2 {
    margin-top: 20px;

    .text-1 {
      font-family: DINAlternate-Bold, DINAlternate;
      font-size: 22px;
      font-weight: bold;
      color: #333;
    }

    .text-2,
    .text-3 {
      font-family: DINAlternate-Bold, DINAlternate;
      font-size: 16px;
      font-weight: bold;
      color: #c0c3cb;
    }

    .text-2 {
      margin: 0 5px;
      font-style: normal;
    }

    .progress {
      position: relative;
      top: -14px;
      left: 78px;
      display: flex;

      li {
        width: 60px;
        height: 4px;
        cursor: pointer;
        background: #c0e6ff;
      }

      .success {
        background: #009cff;
      }
    }
  }
}
</style>
